@require '~styl/base/palette.styl'

.instructions-box
  right 26px
  top 26px
  color $body-color
  font-size 12px
  line-height 17px
  position absolute
  background-color white
  border 1px solid $table-border-color
  border-radius 3px
  box-shadow 0 0 4px 0 rgba(0, 0, 0, 0.2)
  letter-spacing 0.5px

  a
    text-decoration none
    color $link-color

  &--collapsed
    cursor pointer
    padding 6px
    line-height 6px
    font-size 13px

.instructions-box-top-bar
  display flex
  justify-content space-between
  background-color $background-color
  padding-top 10px
  padding-bottom 10px
  padding-left 15px
  padding-right 15px

  &__see_nodes
    color $headings-color
    font-family Lato-Bold

  &__setup_link
    margin-left 10px

  &__x-out
    cursor pointer

.instructions-box-content
  margin-top 10px
  margin-bottom 15px
  margin-left 15px
  margin-right 15px
  max-width 395px
  color black

  ol
    margin-left 15px
    margin-bottom 5px

  &__todo-item
    padding-bottom 2px
    position relative

  &__todo-check
    position absolute
    font-size 32px
    top -4px
    left -25px
    color: $link-color

  &__screenshot
    // Crop the image.
    height 200px
    overflow hidden

    img
      margin-top -50px // Translate the image.
      width 395px
      overflow hidden

  code
    background-color $background-color
    border 1px solid $table-border-color
    border-radius 2px
    padding 1px
